<template>
	<view class="uploadWrap">
		<text v-text="item.label" class="label"></text>
		<view class="imgList" v-if="getImgArr.length != 0">
			<view class="imgPart" v-for="(ele, i) in getImgArr" :key="ele.id">
				<image :src="ele.fileUrl || ele.docFileUrl" mode="aspectFit" @click="previewImg(i)"></image>
				<view class="del" v-if="!item.disabled" @click="delImg(i)">-</view>
			</view>
		</view>
		<view class="upload" v-if="!item.disabled && item.limitSize > getImgArr.length">
			<view @click="upload"><image src="../../static/zhaoxiangji.png"></image></view>
		</view>
		
		<view >
			<view  class="download" v-for="(ele,index) in getFileArr" :key="ele.id">
				<image src="../../static/file.png" class="file"></image>
				<view class="fileInfo">
					<text v-text="ele.fileName||ele.docFileName"></text>
				</view>
				<view class="load" @click="downloadFile(ele.fileUrl || ele.docFileUrl)">
					<image src="../../static/load.png"></image>
					下载阅读
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
import baseUrl from '../../libs/config.js';
export default {
	data() {
		return {
			header: '',
			docFileArr: []
		};
	},
	created() {
		let Authorization = uni.getStorageSync('Authorization');
		this.header = {
			Authorization: 'Wechat ' + Authorization
		};
	},
	methods: {
		//下载文档
		downloadFile(url) {
			uni.downloadFile({
				url: url, //仅为示例，并非真实的资源
				success: res => {
					uni.saveFile({
						tempFilePath: res.tempFilePath,
						success(res) {
							let path = res.savedFilePath;
							uni.showLoading({
								title: '打开文档中...'
							});
							setTimeout(
								() =>
									uni.openDocument({
										filePath: path,
										success(res) {
											setTimeout(function() {
												uni.hideLoading();
											}, 500);
										},
										fail() {
											uni.showToast({
												title: '下载失败',
												icon: 'none'
											});
										},
										complete(res) {
											
										}
									}),
								1000
							);
						
						}
					});
				}
			});
		},
		delImg(i) {
			this.docFileArr.splice(i, 1);
			this.item.attachmentVoListStr = JSON.stringify(this.docFileArr);
			this.$emit('uploadChange', this.item);
		},
		upload() {
			let count = this.item.limitSize ? this.item.limitSize - this.getImgArr.length : 9;
			uni.chooseImage({
				count: count,
				success: res => {
					const tempFilePaths = res.tempFilePaths;
					tempFilePaths.forEach((img, i) => {
						uni.uploadFile({
							url: baseUrl + this.item.url,
							filePath: tempFilePaths[i],
							name: 'file',
							header: this.header,
							success: uploadFileRes => {
								let data = JSON.parse(uploadFileRes.data);
								if (data.code == 0) {
									let res = data.result;
									this.docFileArr.push({
										fileId: res.id,
										fileUrl: res.fileUrl,
										docFileId: res.id,
										docFileUrl: res.fileUrl,
										docFileName: res.fileName
									});

									this.item.attachmentVoListStr = JSON.stringify(this.docFileArr);
									this.$emit('uploadChange', this.item);
								}
							},
							fail(e) {
								uni.showToast({
									icon: 'none',
									title: '上传失败'
								});
							}
						});
					});
					// uni.showToast({
					// 	icon: 'none',
					// 	title: '上传成功'
					// });
				}
			});
		},
		previewImg(i) {
			var index = i;
			let urls = this.getImgArr.map(e => e.fileUrl || e.docFileUrl);
			wx.previewImage({
				current: this.getImgArr[i].fileUrl || this.getImgArr[i].docFileUrl, //当前图片地址
				urls: urls, //所有要预览的图片的地址集合 数组形式
				success: function(res) {},
				fail: function(res) {},
				complete: function(res) {}
			});
		}
	},
	computed: {
		getImgArr: function() {
			if (this.item.attachmentVoListStr) {
				let arr = JSON.parse(this.item.attachmentVoListStr);
				let retArr = arr.filter(item => {
					let url = item.fileUrl || item.docFileUrl;
					let urlArr = url.split('.');
					let index = urlArr.length - 1;
					return urlArr[index] == 'jpg' || urlArr[index] == 'jpeg' || urlArr[index] == 'png' || urlArr[index] == 'gif';
				});
				return retArr;
			} else {
				return [];
			}
		},
		getFileArr(){
			let arr= []
			if (this.item.attachmentVoListStr) {
			// let reg = /(?<=\.)[A-Za-z]*/;
			// let reg = new RegExp("(?<=\\.)[A-Za-z]+",'g');
			let reg = new RegExp("\\.\\w+$");
			// let reg = /\.\w+$/;
			let imgTypeArr = ['.jpg', '.jpeg', '.png','.gif','.JPG', '.JPEG', '.PNG','.GIF'];
			let attachments = JSON.parse(this.item.attachmentVoListStr)
			attachments.forEach(ele=>{
				let res = reg.exec(ele.fileName||ele.docFileName);
				if(imgTypeArr.includes(res[0])){
					return 
				}else{
					arr.push(ele)
				}
			})
			}
			return arr
		}
	},
	props: {
		item: {
			type: Object,
			required: true
		}
	}
};
</script>

<style lang="scss" scoped>
.download {
		border-top: 1upx solid #ddd;
		border-bottom: 1upx solid #ddd;
		padding: 30upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20upx;
		margin-bottom: 30upx;
		.file {
			width: 44upx;
			height: 53upx;
		}
		.fileInfo {
			width: 410upx;
			text {
				display: block;
				&:nth-of-type(1) {
					font-size: 28upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: rgba(51, 51, 51, 1);
				}
				&:nth-of-type(2) {
					font-size: 22upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: rgba(51, 51, 51, 1);
				}
			}
		}
		.load {
			font-size: 26upx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: rgba(60, 104, 229, 1);
	
			image {
				width: 27upx;
				height: 26upx;
			}
		}
	}
.uploadWrap {
	width: 646upx;
	margin: 20upx auto;
	.label {
		padding: 10upx 0;
		display: block;
	}
	text {
		font-size: 28upx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		// color: rgba(51, 51, 51, 1);
		color: #3c68e5;
	}
}
.upload {
	width: 646upx;
	height: 380upx;
	border: 1upx dashed rgba(170, 170, 170, 1);
	margin: 20upx auto;
	display: flex;
	align-items: center;
	justify-content: center;
	view {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100upx;
		height: 100upx;
		background: linear-gradient(0deg, rgba(60, 104, 229, 1) 0%, rgba(107, 146, 255, 1) 100%);
		border-radius: 50%;
		image {
			width: 50upx;
			height: 37upx;
		}
	}
}
.imgList {
	display: flex;
	width: 646upx;
	justify-content: left;
	flex-wrap: wrap;
}
.imgPart {
	width: 200upx;
	height: 200upx;
	padding: 10upx;
	border: 1upx dashed #ddd;
	position: relative;
	margin-right: 15upx;
	image {
		width: 100%;
		height: 100%;
	}
	.del {
		width: 30upx;
		height: 30upx;
		border-radius: 50%;
		background: #999;
		font-size: 40upx;
		font-weight: 600;
		right: 0;
		top: 0;
		position: absolute;
		margin-top: -5upx;
		margin-right: -5upx;
		line-height: 20upx;
		color: #fff;
		text-align: center;
	}
}
</style>
